<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="js/vue.global.js"></script>
    <style>
      @import url("css/index.css");
    </style>
    <style></style>
  </head>

  <body>
    <div id="app">
      <transition name="fade">
        <div class="loading-mask" v-show="pageStatus.loading">
          <div class="spinner-eff spinner-eff-3">
            <div class="circle circle-1"></div>
            <div class="circle circle-2"></div>
            <div class="circle circle-3"></div>
          </div>
          <div class="pre-loading-div" v-if="!pageStatus.loadingText">加载中</div>
          <div class="true-loading-div" v-else>{{ pageStatus.loadingText || '加载中'}}</div>
        </div>
      </transition>

      <view class="popup-content">
        <view class="text-center page-title">打印预览</view>
        <view class="report-content" id="render-report">
          <text class="title">{{ otherInfo.businessName }}</text>
          <text class="sub-title">【营收统计报表】</text>
          <view>
            <view>统计日期: {{ otherInfo.statisticalDate }}</view>
            <view>打印日期: {{ otherInfo.printTime }}</view>
            <view>打印人: {{ otherInfo.printPerson }}</view>
          </view>

          <view class="item-box">
            <view class="btitle">收款统计</view>
            <u-row gutter="0">
              <u-col span="4"><text class="line-text">收款业务</text></u-col>
              <u-col span="4"><text class="line-text">收款笔数</text></u-col>
              <u-col span="4"><text class="line-text">收款金额</text></u-col>
            </u-row>
            <u-row gutter="0" v-for="(item, index) in dataList.collectionStatistics" :key="index">
              <u-col span="4"> <text class="line-text">{{ item.name }}</text></u-col>
              <u-col span="4"><text class="line-text">{{ item.num }}笔</text></u-col>
              <u-col span="4"><text class="line-text">{{ item.money }}</text></u-col>
            </u-row>
          </view>

          <view class="item-box">
            <view class="btitle">收款构成</view>
            <u-row gutter="0">
              <u-col span="4"><text class="line-text">收款方式</text></u-col>
              <u-col span="4"><text class="line-text">收款笔数</text></u-col>
              <u-col span="4"><text class="line-text">收款金额</text></u-col>
            </u-row>
            <u-row gutter="0" v-for="(item, index) in dataList.collectionComposition" :key="index">
              <u-col span="4"> <text class="line-text">{{ item.name }}</text></u-col>
              <u-col span="4"><text class="line-text">{{ item.num }}笔</text></u-col>
              <u-col span="4"><text class="line-text">{{ item.money }}</text></u-col>
            </u-row>
          </view>

          <view class="item-box">
            <view class="btitle">收款构成-营业收入</view>
            <u-row gutter="0">
              <u-col span="4"><text class="line-text">收款方式</text></u-col>
              <u-col span="4"><text class="line-text">收款笔数</text></u-col>
              <u-col span="4"><text class="line-text">收款金额</text></u-col>
            </u-row>
            <u-row gutter="0" v-for="(item, index) in dataList.operatingRevenue" :key="index">
              <u-col span="4"> <text class="line-text">{{ item.name }}</text></u-col>
              <u-col span="4"><text class="line-text">{{ item.num }}笔</text></u-col>
              <u-col span="4"><text class="line-text">{{ item.money }}</text></u-col>
            </u-row>
          </view>

          <view class="item-box">
            <view class="btitle">收款构成-会员业务</view>
            <u-row gutter="0">
              <u-col span="4"><text class="line-text">收款方式</text></u-col>
              <u-col span="4"><text class="line-text">收款笔数</text></u-col>
              <u-col span="4"><text class="line-text">收款金额</text></u-col>
            </u-row>
            <u-row gutter="0" v-for="(item, index) in dataList.memberPayment" :key="index">
              <u-col span="4"> <text class="line-text">{{ item.name }}</text></u-col>
              <u-col span="4"><text class="line-text">{{ item.num }}笔</text></u-col>
              <u-col span="4"><text class="line-text">{{ item.money }}</text></u-col>
            </u-row>
          </view>

          <view class="item-box">
            <view class="btitle">会员消费</view>
            <u-row gutter="0" v-for="(item, index) in dataList.memberConsumption" :key="index">
              <u-col span="4"> <text class="line-text">{{ item.name }}</text></u-col>
              <u-col span="4"><text class="line-text">{{ item.num }}笔</text></u-col>
              <u-col span="4"><text class="line-text">{{ item.money }}</text></u-col>
            </u-row>
          </view>

          <view class="item-box">
            <view class="btitle">会员充值</view>
            <u-row gutter="0" v-for="(item, index) in dataList.memberRecharge" :key="index">
              <u-col span="4"> <text class="line-text">{{ item.name }}</text></u-col>
              <u-col span="4"><text class="line-text">{{ item.num }}笔</text></u-col>
              <u-col span="4"><text class="line-text">{{ item.money }}</text></u-col>
            </u-row>
          </view>

          <view class="item-box">
            <view class="btitle">会员卡押金</view>
            <u-row gutter="0">
              <u-col span="4"><text class="line-text">类型</text></u-col>
              <u-col span="4"><text class="line-text">张数</text></u-col>
              <u-col span="4"><text class="line-text">金额</text></u-col>
            </u-row>
            <u-row gutter="0" v-for="(item, index) in dataList.membershipCardDeposit" :key="index">
              <u-col span="4"> <text class="line-text">{{ item.name }}</text></u-col>
              <u-col span="4"><text class="line-text">{{ item.num }}张</text></u-col>
              <u-col span="4"><text class="line-text">{{ item.money }}</text></u-col>
            </u-row>
          </view>

          <view class="item-box">
            <view class="btitle">订单统计</view>
            <u-row gutter="0" v-for="(item, index) in dataList.orderStatistics" :key="index">
              <u-col span="6"> <text class="line-text">{{ item.name }}</text></u-col>
              <u-col span="6"><text class="line-text">{{ item.num }}笔</text></u-col>
            </u-row>
          </view>

          <view class="item-box">
            <view class="btitle">敏感操作统计</view>
            <u-row gutter="0">
              <u-col span="4"><text class="line-text">项目</text></u-col>
              <u-col span="4"><text class="line-text">数量</text></u-col>
              <u-col span="4"><text class="line-text">金额</text></u-col>
            </u-row>
            <u-row gutter="0" v-for="(item, index) in dataList.refundStatistics" :key="index">
              <u-col span="4"> <text class="line-text">{{ item.name }}</text></u-col>
              <u-col span="4"><text class="line-text">{{ item.num }}单</text></u-col>
              <u-col span="4"><text class="line-text">{{ item.money }}</text></u-col>
            </u-row>
          </view>

          <view class="item-box">
            <view class="btitle">优惠统计</view>
            <u-row gutter="0">
              <u-col span="4"><text class="line-text">优惠方式</text></u-col>
              <u-col span="4"><text class="line-text">单数</text></u-col>
              <u-col span="4"><text class="line-text">优惠金额</text></u-col>
            </u-row>
            <u-row gutter="0" v-for="(item, index) in dataList.discountStatistics" :key="index">
              <u-col span="4"> <text class="line-text">{{ item.name }}</text></u-col>
              <u-col span="4"><text class="line-text">{{ item.num }}单</text></u-col>
              <u-col span="4"><text class="line-text">{{ item.money }}</text></u-col>
            </u-row>
          </view>

          <view class="my-2">
            <view class="my-2 flex">
              <text class="whitespace-nowrap">统计人签字: </text>
              <view class="line-empty"></view>
            </view>
            <view class="my-2 flex">
              <text class="whitespace-nowrap">监督人签字: </text>
              <view class="line-empty"></view>
            </view>
          </view>

          <view class="my-2">
            <text class="block my-2 font-bold">提示: </text>
            <text>1. 如统计后存在取消订单的情况，核对时请以营收报表的数据为准。 </text>
          </view>
        </view>

        <view class="w-50rpx m-auto mt-8rpx fixed-ctrl-bar">
          <!-- @click="startPrint(canvasToImage)" -->
          <!-- @click="canvasToImage.generateImage" -->
          <button
            class="u-button"
            @click="generateImage"
            :loading="pageStatus.loading"
            icon-color="white"
            :disabled="pageStatus.loading"
            type="primary"
          >
            打印报表
          </button>
          <!-- <u-button
            @click="generateImage"
            :loading="pageStatus.loading"
            icon-color="white"
            :disabled="pageStatus.loading"
            type="primary"
            >打印</u-button
          > -->
        </view>
      </view>
    </div>

    <!-- uni 的 SDK -->
    <!-- <script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.1/index.js"></script> -->
    <script src="js/html2canvas.min.js"></script>
    <script type="text/javascript" src="./js/uni-webview@1.5.4.js"></script>

    <script>
      // import html2canvas from "./js/html2canvas.min.js";
      // import html2canvas from "html2canvas";
      //  const html2canvas = require("./js/html2canvas.min.js");

      const vue3Composition = {
        // components: { fengShuiCompass },
        data() {
          return {
            dataList: {},
            otherInfo: {
              // 商家名称
              businessName: "",
              // 打印人
              printPerson: "",
              // 打印日期
              printTime: "",
              // 统计日期
              statisticalDate: "",
            },
            pageStatus: { loading: true },
          };
        },
        mounted() {
          // UNIAPP 通过 this.currentWebview.evalJS(`FUNC(${JSON.stringify(data)})`); 直接调用

          /* 其他事件 */
          window.apiChannel = (data) => {
            const { API, DATA } = data;
            console.log("hashObj data:", data);
            if (API == "setData") {
              console.log("apiChannel 消息: setData" + JSON.stringify(DATA));
              const { otherInfo, dataList } = DATA.data;
              this.dataList = dataList;
              this.otherInfo = otherInfo;
              this.pageStatus.loading = false;
            } else if (API == "changeLoading") {
              const { status } = DATA.data;
              this.pageStatus.loading = status || false;
            }
          };

          console.log("mounted");
          // this.pageStatus.loading = false;
          uni.postMessage({
            data: {
              api: "onWebviewMounted",
              data: {},
            },
          });
        },

        methods: {
          // 生成图片需要调用的方法
          generateImage() {
            return new Promise((resolve, reject) => {
              this.pageStatus.loading = true;
              this.pageStatus.loadingText = "打印准备中";
              // uni.showLoading({ title: "生成中", mask: true });
              const timer = setTimeout(() => {
                // const dom = uni.createSelectorQuery().select("#report-content");
                const dom = document.getElementById("render-report"); // 需要生成图片内容的 dom 节点
                html2canvas(dom, {
                  width: dom.clientWidth, //dom 原始宽度
                  height: dom.clientHeight,
                  scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
                  scrollX: 0,
                  useCORS: true, //支持跨域
                  scale: 2, // 设置生成图片的像素比例，默认是1，如果生成的图片模糊的话可以开启该配置项
                })
                  .then((canvas) => {
                    // 生成成功
                    // html2canvas 生成成功的图片链接需要转成 base64位的url
                    const data = this.receiveRenderData(canvas.toDataURL("image/png"));
                    // 通知webview 生成成功
                    uni.postMessage({
                      data: {
                        api: "onGenerateImageSuccess",
                        data: data,
                      },
                    });
                    this.pageStatus.loadingText = "连接打印机..";
                    resolve({ success: true, data: data });
                  })
                  .catch((err) => {
                    this.pageStatus.loadingText = "生成失败..";
                    console.error("html2canvas 生成失败", err);
                    // 生成失败 弹出提示弹窗

                    // uni.hideLoading();
                    // uni.showToast({ title: "生成失败", icon: "none" });
                    reject({ success: false, data: null });
                  })
                  .finally(() => {
                    clearTimeout(timer);
                  });
              }, 300);
            });
          },
          receiveRenderData(val) {
            return val.replace(/[\r\n]/g, ""); // 去除base64位中的空格
          },
        },
      };
      Object.assign(window, Vue);
      const app = createApp(vue3Composition);
      app.component("u-row", {
        props: [],
        template: `
      <view style="display:flex;width:100%;justify-content: space-between;">
        <slot></slot>
        </view>
    `,
      });
      app.component("u-col", {
        props: ["span"],
        template: `
       <view :style="{
         width: span / 12 * 100 + '%',  
       }"><slot></slot>
       </view>
    `,
      });

      app.mount("#app"); //初始化
    </script>
    <script type="text/javascript">
      document.addEventListener("UniAppJSBridgeReady", function () {
        uni.postMessage({
          data: {
            api: "onWebviewShowed",
            data: {},
          },
        });
      });
    </script>
  </body>
  <!-- <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  // VConsole 默认会挂载到 `window.VConsole` 上
  var vConsole = new window.VConsole();
</script> -->

  <!-- <script src="js/rpx4html.js"></script> -->
</html>
